<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .navbar {
            margin-left: 30px;
            display: flex;
            width: 700px;
            height: 40px;
            justify-content: space-evenly;
            align-items: center;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        .navbar>div {
            width: 100px;
            height: 30px;
            text-align: center;
            font-weight: bolder;
            color: cadetblue;
        }

        .wrapper {
            list-style: none;
            display: flex;
            height: 30px;
        }

        .wrapper> :nth-child(1) {
            width: 40px;
        }

        .wrapper> :nth-child(2) {
            width: 130px;
        }

        .wrapper> :nth-child(3) {
            width: 140px;
        }

        .wrapper> :nth-child(4) {
            width: 120px;
        }

        .wrapper> :nth-child(5) {
            width: 160px;
        }

        .wrapper> :nth-child(6) {
            margin-left: 40px;
            text-decoration: underline;
            color: purple;
            cursor: pointer;
        }

        .wrapper>div {
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <navigator></navigator>
        <books-list :books="books" @delete-book="deleteBook($event)"></books-list>
        <h2 class="sum">总价格：￥{{ totalPrice }}</h2>
    </div>

    <script>
        Vue.component('navigator', {
            template: `
            <div class="navbar">
                <div>书籍名称</div>
                <div>出版时间</div>
                <div>价格</div>
                <div>购买数量</div>
                <div>操作</div>
            </div>
            `
        });
        Vue.component('books-list', {
            props: ['books'],
            template: `
            <ul>
                <li class="wrapper" v-for="(item,index) in books" :key="item.id">
                    <div>{{ item.order }}</div>
                    <div>{{ item.name }}</div>
                    <div>{{ item.date }}</div>
                    <div>￥{{ item.price }}.00</div>
                    <div>
                        <button @click="subtract(item)">-</button>
                        <span>{{ item.number }}</span>
                        <button @click="add(item)">+</button>
                    </div>
                    <div @click="$emit('delete-book', index)">移除</div>
                </li>
            </ul>
            `,
            methods: {
                subtract: (book) => {
                    if(book.number > 1){
                        book.number --;
                    }
                },
                add: (book) => {
                    book.number ++;
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
                books: [{
                    id: 0,
                    order: 1,
                    name: '《算法导论》',
                    date: '2006-9',
                    price: 55,
                    number: 1
                }, {
                    id: 1,
                    order: 3,
                    name: '《编程珠玑》',
                    date: '2006-10',
                    price: 35,
                    number: 1
                }, {
                    id: 2,
                    order: 4,
                    name: '《代码大全》',
                    date: '2016-9',
                    price: 85,
                    number: 1
                }]
            },
            methods: {
                deleteBook(index){
                    this.books.splice(index, 1);
                }
            },
            computed: {
                totalPrice: function(){
                    var total = 0;
                    this.books.forEach(element => {
                        total += element.number * element.price;
                    });
                    return total.toFixed(2);
                }
            }
        });
    </script>
</body>

</html>